<template>
  <div class="suppose-search">
    <div
      class="title mleft-10 pointer"
      @click="$emit('goTypeDetail', titleName[0])">
      <i class="iconfont" :class="titleName[1]"></i>
      {{ titleName[0] }}
    </div>
    <ul class="font-12">
      <li
        class="text-hidden"
        v-for="item in typeList"
        :key="item.id"
        @click="$emit('change', item.id)"
      >
        <slot :dreamItem="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'searchInfo',

  props: {
    searchTitle: {
      type: String,
      default: ''
    },
    typeList: {
      type: Array,
      default: () => []
    },
    skeleton: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    titleName() {
      if (this.searchTitle === 'songs') {
        return ['单曲', 'icon-yinle_2'];
      } else if (this.searchTitle === 'artists') {
        return ['歌手', 'icon-yiliaohangyedeICON-'];
      } else if (this.searchTitle === 'albums') {
        return ['专辑', 'icon-zhuanji'];
      }
      return ['歌单', 'icon-gedan'];
    }
  }
}
</script>

<style lang="less" scoped>
.suppose-search {
  .title {
    height: 50px;
    line-height: 50px;
    color: #9f9999;
    &:hover {
      color: #555;
    }
  }
  >ul {
    li {
      height: 30px;
      line-height: 30px;
      padding-left: 30px;
      padding-right: 10px;
      &:hover {
        background: #f6f6f6;
      }
    }
  }
}
</style>